<template>
    <div class="app-container checkContainer">
        <div class="customContainer">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                        border>
                        查看已删门店
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right"
                        unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" placement="bottom-end">
                        <div slot="content" style="line-height:20px">
                            <br> 时间:查询的日期，日周期为今日6点至次日6点 上次盘点时间:即一个盘点周期内上一次主仓或者中转仓盘点确认后的时间
                            <br> 本次盘点时间:即一个盘点周期内这一次主仓或者中转仓盘点确认后的时间
                            <br> 上次盘点库存（个）:即一个盘点周期内上一次盘点完成后的门店仓（主仓+中转仓+机台仓）的礼品数
                            <br> 本次账目库存（个）:经实际操作后的理论实际库存数
                            <br> 本次盘点库存（个）:经盘点校准和完成后的校准数
                            <br> 盘盈数（个）:公式=盘点数-理论库存数
                            <br> 盘亏数（个）:公式=盘点数-理论库存数
                            <br> 店内仓:主仓，中转仓-渠道，机台仓
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table highlight-current-row show-summary sum-text="合计" :data="list" v-loading.body="listLoading" border
                size="mini">
                <el-table-column align="center" label="本次盘点时间">
                    <template slot-scope="scope">
                        <b>{{scope.row.end}}</b>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="上次盘点时间">
                    <template slot-scope="scope">
                        {{scope.row.begin}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="仓库">
                    <template slot-scope="scope">
                        <el-button type="text" @click="ditailClick(scope.row)">店内仓详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="上次盘点库存（个）" prop="lastStock"></el-table-column>
                <el-table-column align="center" label="本次账面库存（个）" prop="thisTheory"></el-table-column>
                <el-table-column align="center" label="本次盘点库存（个）" prop="thisActual"></el-table-column>
                <el-table-column align="center" label="盘盈" prop="checkMore">
                    <template slot-scope="scope">
                        <router-link
                            :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.create_time}}">
                            <el-button class="success" type="text"> {{scope.row.checkMore}}</el-button>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="盘亏" prop="checkLess">
                    <template slot-scope="scope">
                        <router-link
                            :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.create_time}}">
                            <el-button class="danger" type="text"> {{scope.row.checkLess}}</el-button>
                        </router-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 弹框 -->
        <el-dialog :close-on-click-modal="false" width="80%" title="店内仓汇总明细" :visible.sync="detailDialog">
            <div style="position:absolute;top:50px;">
                门店：{{store_name}}　　　本次盘点时间：{{this_time}}　　 上次盘点时间：{{last_time}}
            </div>
            <el-table highlight-current-row :data="detailList" border size="mini">
                <el-table-column align="center" property="house_name" label="店内仓"></el-table-column>
                <el-table-column align="center" property="lastStock" label="上次盘点库存（个）"></el-table-column>
                <el-table-column align="center" property="thisTheory" label="本次账面库存（个）"></el-table-column>
                <el-table-column align="center" property="thisActual" label="本次盘点库存（个）"></el-table-column>
                <el-table-column align="center" label="盘盈">
                    <template slot-scope="scope">
                        <router-link
                            :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.create_time,house_id:scope.row.house_id}}">
                            <el-button class="success" type="text" @click="detailDialog=false"> {{scope.row.checkMore}}
                            </el-button>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="盘亏">
                    <template slot-scope="scope">
                        <router-link
                            :to="{name:'report/checkDetail_form',params :{store_id:scope.row.store_id,time:scope.row.create_time,house_id:scope.row.house_id}}">
                            <el-button class="danger" type="text" @click="detailDialog=false"> {{scope.row.checkLess}}
                            </el-button>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="盘盈金额（元）">
                    <template slot-scope="scope">
                        {{scope.row.moneyMore|keepTwoNum}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="盘亏金额（元）">
                    <template slot-scope="scope">
                        {{scope.row.moneyLess|keepTwoNum}}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-button class="pull-right" type="primary" size="small" @click="exportClick()" :loading="exportLoading">导出表单<count-down ref="cd"/></el-button>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getExport,
        getDetail,
        getStoreList,
    } from "@/api/storage_control/checkCollect_form";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                exportLoading: false,
                typeList: [{ id: 1, name: '门店仓' }, { id: '2', name: '公司仓' }],
                list: [],
                store_name: '',
                last_time: '',
                this_time: '',
                listLoading: false,
                detailDialog: false,
                storeList: null,
                detailList: [],
                formInline: {
                    category_id: 129,
                    store_id: '',
                    begin_time: '',
                    end_time: '',
                    look_del: '0'
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            // 详情弹框
            ditailClick(row) {
                this.store_name = row.store_name
                this.last_time = row.begin;
                this.this_time = row.end;
                getDetail({ store_id: this.formInline.store_id, time: row.create_time }).then(response => {
                    response.zhu.push.apply(response.zhu, response.zhong);
                    response.zhu.push.apply(response.zhu, response.machine);
                    this.detailList = response.zhu
                });
                this.detailDialog = true;
            },
            // 导出
            exportClick() {
                getExport(this.formInline)
                this.exportLoading = true;
                this.$refs.cd.countDownF(30).then(() => {
                    this.exportLoading = false;
                });
            },
            // 获取门店
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: 129 }).then(response => {
                    this.storeList = response;
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    }
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    this.list = response.list
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    }
</script>